function ViewportInfo( editor ) {

	const signals = editor.signals;


	const container = document.createElement('div');
	container.className='tezero-viewport-info'
	container.style.position='absolute';
    container.style.left='10px';
    container.style.bottom='10px';
    container.style.fontSize='12px';
    container.style.color='#fff';
    container.style.display='flex';
    container.style.flexDirection='column';

	const objectsText = document.createElement('span');
	const verticesText = 	document.createElement('span');
    const trianglesText = document.createElement('span');
   	const frametimeText =  document.createElement('span');

    objectsText.textContent='物体';
    verticesText.textContent='顶点';
    trianglesText.textContent='三角形';
    frametimeText.textContent='帧时';

    container.appendChild(objectsText);
    container.appendChild(verticesText);
    container.appendChild(trianglesText);
    container.appendChild(frametimeText);

	signals.objectAdded.add( update );
	signals.objectRemoved.add( update );
	signals.geometryChanged.add( update );

	//

	function update() {

		const scene = editor.scene;

		let objects = 0, vertices = 0, triangles = 0;

		for ( let i = 0, l = scene.children.length; i < l; i ++ ) {

			const object = scene.children[ i ];

			object.traverseVisible( function ( object ) {

				objects ++;

				if ( object.isMesh || object.isPoints ) {

					const geometry = object.geometry;

					vertices += geometry.attributes.position.count;

					if ( object.isMesh ) {

						if ( geometry.index !== null ) {

							triangles += geometry.index.count / 3;

						} else {

							triangles += geometry.attributes.position.count / 3;

						}

					}

				}

			} );

		}

        objectsText.textContent='物体: '+objects.toString();
        
		verticesText.textContent='顶点: '+vertices.toString();
		trianglesText.textContent='三角形: '+triangles.toString();

	}

	signals.sceneRendered.add( updateFrametime );

	function updateFrametime( frametime ) {

		frametimeText.textContent= '帧时: '+Number( frametime ).toFixed( 2 ) + ' ms' ;

	}

	return container;

}

export { ViewportInfo };